<%--添加菜品--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="col-md-9">
    <div class="data_list">
        <div class="data_list_title">
            <span class="iconfont icon-tianjia "></span>&nbsp;${isUpdate}<c:if test="${empty isUpdate}">添加菜品</c:if>
        </div>
        <div class="container-fluid">
            <div class="row" style="padding-top: 20px;">
                <form method="post" enctype="multipart/form-data" class="form-horizontal" action="${pageContext.request.contextPath}/shopFood/addShopFood.do">
                    <input type="hidden" id="fileImg" name="fileImg" value="${fileImg}">
                    <c:if test="${!empty isUpdate}"><input type="hidden" name="foodId" value="${shop.foodId}"></c:if>
                    <div class="form-group">
                        <label for="foodName" class="col-sm-4 control-label">菜品名称:</label>
                        <div class="col-sm-8">
                            <input class="form-control myinput" type="text" id="foodName" name="foodName" value="${shop.foodName}" }>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="foodName" class="col-sm-4 control-label">菜品单价:</label>
                        <div class="col-sm-8">
                            <input class="form-control myinput" type="text" id="foodPrice" name="foodPrice" value="${shop.foodPrice}">
                        </div>
                    </div>
                    <div class="form-group">
<%--                        图片的相对地址还是相对于主页面的路径--%>
                        <label for="foodImg1" class="col-sm-4 control-label">菜品图片:
                            <c:if test="${!empty isUpdate}">
                                <img id="foodImg1" class="myimg" src="../statics/images/food/${shop.foodImg}">
                                <img id="foodImg2" class="myhidden" src="../statics/images/food/${shop.foodImg}">
                            </c:if>
                            <c:if test="${empty isUpdate}">
                                <img id="foodImg1" class="myimg" src="../statics/images/food/404.png">
                                <img id="foodImg2" class="myhidden" src="../statics/images/food/404.png">
                            </c:if>
                        </label>
                        <div class="col-sm-8">
                            <input class="myfile" type="file" id="updateImg" name="foodImg" >
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-8" style="float: right">
                            <input class="form-control myinput" type="submit" id="but" value="提交" >
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $('#updateImg').change(function (){
        var imgpath = $('#fileImg').val()
        var files = $('#updateImg')[0].files[0]
        var data = new FormData();
        //下面的键值对不是随意的 和后端参数一致 必须是POST请求
        data.append('file',files)
        data.append('fileImg',imgpath)
        $.ajax({
            url:'../util/filePost.data',
            type:'POST',
            data:data,
            processData:false,
            contentType:false,
            dataType:'json',
            success:function (result){
                console.log(result.filename)
                //    通过在服务器(导航栏有ip地址)的相对路径重新加载
                //前面./作用是返回到服务器项目根地址 -- 规定的路径最好就是原来用户存的路径，这样只需要修改数据库的名就行了，下次加载就能在原路径加载
                //这里需要更新一下 input标签的文件名，但是前端也会变，那么就需要在form post请求写文件上传
                $("#foodImg1").attr("src", "../statics/images/food/"+result.filename)
                $("#foodImg2").attr("src", "../statics/images/food/"+result.filename)
            },
        })
    })
</script>
</script>
<style>
    .myimg{
        height: 20px;
    }
    .control-label{
        padding-bottom: 7px;
    }
    .myhidden{
        display: none;
        height: 100px;
    }
    .myimg:hover{
        cursor: pointer;
    }
    .myimg:hover~.myhidden{
        display: inline;
    }
    .myfile{
        height: 34px;
        padding: 7px 0 7px 0;
        color: #3a8cde;
    }
</style>